<template>
  <el-container>
    <el-main>
      <div class="navMenbers ">
        <el-breadcrumb separator-class="el-icon-arrow-right ">
          <span class="currentLocation ">当前位置：</span>
          <el-breadcrumb-item :to="{ path: '/' }">成员列表</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/members'}">成员管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <router-view />
    </el-main>
    <el-dialog title="积分管理" :visible.sync="centerDialogVisible" width="32%" center>
      <!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="studentName">
          <el-input v-model="ruleForm.studentName"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="studentID">
          <el-input v-model="ruleForm.studentID"></el-input>
        </el-form-item>
        <el-form-item label="积分" prop="Integral">
          <el-input v-model="ruleForm.Integral" placeholder="请输入积分，例如-1，+2等"></el-input>
        </el-form-item>
        <el-form-item label="积分事项" prop="integralContent">
          <el-input type="textarea" v-model="ruleForm.integralContent"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="add-button" @click="centerDialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>
    <el-dialog title="补签时长" :visible.sync="centerDialogVisible1" width="32%" center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="studentName">
          <el-input v-model="ruleForm.studentName"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="studentID">
          <el-input v-model="ruleForm.studentID"></el-input>
        </el-form-item>
        <el-form-item label="补签时长" prop="patchLength">
          <el-input v-model="ruleForm.patchLength"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible1 = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import api from "@/api.js";
import AsideNav from "@/components/nav/AsideNav";

export default {
  components: {
    AsideNav
  },
  data() {
    return {
      navItem: [
        { index: "/members", title: "成员管理" },
        { index: "/members/add", title: "新增成员" }
      ],
      centerDialogVisible: false,
      centerDialogVisible1: false,
      centerDialogVisible2: false,
      ruleForm: {
        studentName: "",
        studentID: "",
        studentClass: "",
        studentPassword: "",
        nativePlace: "",
        studentSex: "1",
        sureStudenPassword: "",
        studentDirection: "",
        Jurisdiction: "",
        phoneNumber: "",
        weChatAccount: "",
        QQNumber: "",
        blogAddress: "",
        contactMailbox: "",
        patchLength: ""
      },
      rules: {
        studentName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 3,
            max: 5,
            message: "名字长度在 3 到 5 个字符",
            trigger: "blur"
          }
        ],
        studentID: [
          { required: true, message: "请输入学号", trigger: "blur" },
          { min: 10, max: 10, message: "学号长度在10个字符", trigger: "blur" }
        ],
        studentClass: [
          { required: true, message: "请输入班级", trigger: "blur" },
          {
            min: 6,
            max: 10,
            message: "班级长度在 6 到 10 个字符",
            trigger: "blur"
          }
        ],
        studentPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码长度在 6 到 20个字符",
            trigger: "blur"
          }
        ],
        nativePlace: [
          { required: true, message: "请输入籍贯", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "籍贯长度在 6 到 20个字符",
            trigger: "blur"
          }
        ],
        studentDirection: [
          { required: true, message: "请输入选择方向", trigger: "blur" },
          {
            min: 4,
            max: 10,
            message: "籍贯长度在 4 到 10个字符",
            trigger: "blur"
          }
        ],
        studentSex: [
          { required: true, message: "请选择性别", trigger: "blur" },
          {
            min: 1,
            max: 3,
            message: "选认真选择性别",
            trigger: "blur"
          }
        ],
        sureStudenPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码长度在 6 到 20个字符",
            trigger: "blur"
          }
        ],
        Jurisdiction: [
          { required: true, message: "请输入权限", trigger: "blur" },
          {
            min: 4,
            max: 10,
            message: "权限长度在 4 到 10个字符",
            trigger: "blur"
          }
        ],
        phoneNumber: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "手机号码长度在11个字符",
            trigger: "blur"
          }
        ],
        weChatAccount: [
          { required: true, message: "请输入微信账号", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "微信账号长度在 5 到 20个字符",
            trigger: "blur"
          }
        ],
        QQNumber: [
          { required: true, message: "请输入QQ号码", trigger: "blur" },
          {
            min: 9,
            max: 10,
            message: "QQ号码长度在 9 到 10个字符",
            trigger: "blur"
          }
        ],
        blogAddress: [
          { required: true, message: "请输入博客地址", trigger: "blur" },
          {
            min: 10,
            max: 100,
            message: "地址长度在 10 到 100个字符",
            trigger: "blur"
          }
        ],
        contactMailbox: [
          { required: true, message: "请输入联系邮箱", trigger: "blur" },
          {
            min: 10,
            max: 50,
            message: "联系邮箱长度在10~50位",
            trigger: "blur"
          }
        ]
      },
    };
  },
  created() {
  },
  methods: {
    clickFn: function () {
      this.$router.push({ path: "/addMember" });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    open2() {
      this.$confirm("此操作将永久除名, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "除名成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消除名"
          });
        });
    }
  }
};
</script>
<style scoped>
.currentLocation {
  float: left;
  margin-left: 3%;
}

.el-main {
  color: #333;
  text-align: center;
  background-color: #f8f9fa;
}
.temporaryImages {
  width: 250px;
  margin-top: 2px;
}

.temporaryImages img {
  width: 120px;
  margin-top: 80px;
}
.navMenbers {
  width: 98%;
  margin: 5px auto;
  padding: 10px 0 10px 0;
  background-color: #ffffff;
}

.memberList {
  width: 98%;
  margin: 5px auto;
  background-color: #ffffff;
}

.memberList .el-button {
  float: right;
  width: 120px;
  margin: 1% 12% 0 0;
}

/* .memberList .listOperation {
} */

.memberList .el-table {
  margin: 15px 15px;
  margin: 0 auto;
  text-align: left;
}

.el-table .el-button {
  width: 60px;
  margin: 0px 3px 0px 3px;
  float: left;
}
.essentialInformation .el-form-item {
  font-weight: bold;
  float: left;
  margin-left: 20px;
}
/* .essentialInformation .httpAddress {
} */
.essentialInformation .el-select {
  margin-left: 10px;
}
.essentialInformation .el-input {
  margin-left: 10px;
}

.essentialInformation .el-radio {
  margin-left: 10px;
  margin-right: 15px;
}

.essentialInformation .el-button {
  width: 180px;
  margin-left: 65px;
  margin-right: 65px;
}
#fristHeader {
  width: 100%;
}

.essentialInformation .inputLength {
  width: 280px;
}

.essentialInformation {
  width: 1000px;
  margin: 0 auto;
  padding-top: 5px;
  background-color: #ffffff;
}

.fristInformation {
  width: 850px;
  margin: 0px auto;
  background-color: #ffffff;
}

#information {
  opacity: 0.8;
  font-size: 15px;
  color: #3b3b3b;
  text-align: left;
  font-weight: bold;
  letter-spacing: 2px;
  border-bottom: 1px dashed #b3b3b3;
}
body > .el-container {
  margin-bottom: 25px;
}
footer {
  font-size: 12px;
  text-align: center;
  padding-bottom: 10px;
  padding-top: 10px;
  font-family: "微软雅黑";
  color: #3b3b3b;
}
</style>